<template>
	<view class="content">
		<canvas class="canvas" canvas-id="canvas" id="canvas" @touchstart="handleTouchStart"
			@touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas>
		<text class="title" @click="drawRec">绘制矩形</text>
		<text class="title" @click="showAndCreatePng">保存</text>
		<text class="title" @click="showImg">绘制img{{touchCount }}</text>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				imgurl: "/static/demo.jpg",
				canvasValue: {
					canvas: null,
					ctx: null,
				},
				width: 400,
				height: 400,
				moveCenter: {},
				//是否在缩放
				isScale: false,
				pointArgs: [],
				patharrs: [],
				canvasInfo: {
					offsetEvtPos: {
						x: null,
						y: null
					}, //偏移事件位置
					offset: {
						x: 0,
						y: 0
					}, //缩放偏移
					scale: 1, //缩放比例
					scaleStep: 0.03, //每次缩放产生的变化量
					maxScale: 3, //最大缩放倍数
					minScale: 0.1 //最小缩放倍数
				},
				touchCount: 0,
				lastDistance: 0,
			};
		},
		onReady() {
			this.ctx = uni.createCanvasContext("canvas", this);
			console.log("--", this.ctx);
		},
		created() {

		},
		methods: {
			drawRec() {
				this.ctx.translate(10, 10);
				this.ctx.drawImage(this.imgurl, 0, 0);
				this.ctx.draw();
			},
			showAndCreatePng() {
				this.ctx.translate(10, 10);
				this.ctx.scale(0.5, 0.5);
				this.ctx.drawImage(this.imgurl, 0, 0);
				this.ctx.draw();
			},
			showImg() {
				this.ctx.scale(0.5, 0.5);
				this.ctx.translate(10, 10);
				this.ctx.drawImage(this.imgurl, 0, 0);
				this.ctx.draw();
			},
			// showImg() {
			// 	let that = this;
			// 	this.ctx.scale(1.5, 1.56);
			// 	that.ctx.drawImage(that.imgurl, 0, 0);
			// 	that.ctx.draw();
			// },
			handleTouchStart(e) {
				this.canvasInfo.offsetEvtPos = {
					x: e.changedTouches[0].x,
					y: e.changedTouches[0].y
				};
			},
			handleTouchMove(e) {
				try {
					let count = e.touches.length;
					if (count == 2) {
						if (!this.isScale) {
							this.getCenterPoint(e.touches[count - 1], e.touches[count - 2]);
						}
						this.isScale = true
						this.scaleCanvas(e.touches[count - 1], e.touches[count - 2])
					} else {
						this.isScale = false;
						this.move(e.touches[count - 1]);
					}
				} catch (err) {
					console.log(err);
				}
			},
			//获取最初的中心点
			getCenterPoint(p1, p2) {
				this.pointArgs = [];
				let x1 = p1.x;
				let y1 = p1.y;
				let x2 = p2.x;
				let y2 = p2.y;
				let newCenterPoint = {
					x: x2 > x1 ? x1 + (x2 - x1) / 2 : x2 + (x1 - x2) / 2,
					y: y2 > y1 ? y1 + (y2 - y1) / 2 : y2 + (y1 - y2) / 2
				};
				this.moveCenter = newCenterPoint
			},
			getDistance(p1, p2) {
				return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
			},
			scaleCanvas(ps, pe) {
				let x1 = ps.x;
				let y1 = ps.y;
				let x2 = pe.x;
				let y2 = pe.y;
				let p1 = {
					x: x1,
					y: y1
				}
				let p2 = {
					x: x2,
					y: y2
				}
				let distance = this.getDistance(p1, p2)
				// console.log("last d::", this.lastDistance, " now D:::,", distance);
				if (this.lastDistance == 0 || this.lastDistance == distance) {
					this.lastDistance = distance;
				} else {
					let isAddScall = this.lastDistance > distance ? 1 : -1;
					let scale = this.canvasInfo.scaleStep * isAddScall + this.canvasInfo.scale;
					// console.log("isAddScall::", isAddScall, " scale::,", scale, "minScalse", this.canvasInfo.minScale);
					if (scale >= this.canvasInfo.minScale) {
						this.canvasInfo.offset.x = this.getOffSetByScale(this.canvasInfo.offset.x, this.canvasInfo
							.offsetEvtPos
							.x,
							this.canvasInfo.scale, isAddScall);
						this.canvasInfo.offset.y = this.getOffSetByScale(this.canvasInfo.offset.y, this.canvasInfo
							.offsetEvtPos
							.y,
							this.canvasInfo.scale, isAddScall);
						this.canvasInfo.scale = scale;
					}
					this.lastDistance = distance;
				}
				this.draw();
			},
			draw() {
				// console.log("offx:", this.canvasInfo.offset.x, "offY", this.canvasInfo.offset.y, "scale:::", this
				// 	.canvasInfo.scale);
				this.ctx.scale(this.canvasInfo.scale, this.canvasInfo.scale);
				this.ctx.translate(this.canvasInfo.offset.x, this.canvasInfo.offset.y);
				this.ctx.drawImage(this.imgurl, 0, 0);
				this.ctx.draw();
			},
			handleTouchEnd(e) {

			},
			/**
			 * @param {Object} offset 缩放前偏移
			 * @param {Object} loc 缩放中心坐标 x或者y
			 * @param {Object} scale 缩放前 缩放
			 * @param {Object} isAddScale 是否缩放  1 \-1
			 */
			getOffSetByScale(offset, loc, scale, isAddScale) {
				let res = isAddScale * ((loc - offset) * 0.03) / scale + (offset);
				console.log("offset:", offset, "loc", loc, "scale:::", scale, " isadd::", isAddScale, "res :::", res);
				return res;
			},
			move(p) {
				let objs = {
					x: p.x,
					y: p.y
				};
				this.canvasInfo.offset.x += objs.x - this.canvasInfo.offsetEvtPos.x;
				this.canvasInfo.offset.y += objs.y - this.canvasInfo.offsetEvtPos.y;
				console.log(this.canvasInfo.offset.x, this.canvasInfo.offset.y);
				// this.ctx.setTransform(this.canvasInfo.scale, 0, 0, this.canvasInfo.scale, this.canvasInfo
				// 	.offset.x, this.canvasInfo.offset.y);
				// this.ctx.clearRect(0, 0, this.width, this.height);
				this.draw();
				this.canvasInfo.offsetEvtPos = objs;
			},
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.canvas {
		height: 200px;
		width: 200px;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;

		border: 1rpx solid gray;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		margin-bottom: 20rpx;
	}
</style>
